<template>
	<view>
		<u-navbar :is-back="false" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="search-wrap">
					<u-search :show-action="false" height="56"></u-search>
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<view class="message-box right-item">
					<u-icon name="chat" size="38"></u-icon>
					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
				</view>
				<view class="dot-box right-item">
					<u-icon name="calendar-fill" size="38"></u-icon>
					<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="button-demo">
				<u-button @click="$navTo('pages/login/index')">导航跳转</u-button>
			</view>
			<view class="link-demo">
				<u-link :color="$u.color['primary']" :under-line="true" href="http://www.uviewui.com">跳转uView文档：www.uviewui.com</u-link>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				background: {
					backgroundColor: '#001f3f',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
</style>
